<template>
  <cfg-form :ref="ref" v-bind="attrs" :data="data" ></cfg-form>
</template>

<script>
export default {
  name:'pg-form',
  components: {},
  inject:['anc'],
  data() {
    return {
        ref:'form'
    };
  },
  props: {
    data:{
        default:()=>{
            return {};
        }
    },
    config:{
        default:()=>{
            return {
              labelWidth: 100,
              labelPosition: 'right',
              cols: 3,
              columns:[],
              rules:{},
              onlyRead:false
            };
        }
    },
    fields:{
        default:()=>{
            return [];
        }
    }
  },
  watch: {},
  computed: {
    attrs(){
        return {
          ...this.config,
          columns:[...this.config.columns,...this.columns],
          rules:{
            ...this.config.rules,
            ...this.rules
          }

        }
    },
    columns(){
        return this.fields.map(field=>{
            return {
                key: field.key,
                title: field.title,
                minWidth: 100,
                align: 'center',
                show: true,
                config:{
                  ...field,
                  required: field.required===true?true:false,
                  options: field.options?field.options.map(option=>{
                    return {
                      label:option,
                      value:option
                    }
                  }):[]
                }
            }
        })
    },
    rules(){
        let rules = {};
        this.fields.map(col=>{
          if(col.required){
            rules[col.key] = [
                { required: col.required, message: '请输入'+col.title, trigger: 'blur' }
            ];
          }
        })
        return rules;
    },
  },
  created() {},
  mounted() {
    
  },
  methods: {
    validate(){
        this.$refs[this.ref].$refs['form'].validate((valid) => {
            if (valid) {
                this.$Message.success('Success!');
            } else {
                this.$Message.error('Fail!');
            }
        })
    }
  }
};
</script>
<style scoped>
</style>